<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Bootstrap 实例 - 条纹表格</title>
    <link rel="stylesheet" href="./css/public.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <style>
        .table>tbody>tr>td,
        .table>tbody>tr>th,
        .table>tfoot>tr>td,
        .table>tfoot>tr>th,
        .table>thead>tr>td,
        .table>thead>tr>th {
            vertical-align: middle;
        }

        .form-control {
            margin-bottom: 5px;
        }
    </style>
</head>

<body>
    <div id="box">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>名称</th>
                    <th>年龄</th>
                    <th>手机号码</th>
                    <th>地址</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in list">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.age}}</td>
                    <td>{{item.phone}}</td>
                    <td>{{item.address}}</td>
                    <td>
                        <button type="button" class="btn btn-default" @click="one(item.id)" data-toggle="modal" data-target="#myModal">修改</button>
                        <button type="button" class="btn btn-default" @click="del(item.id)">删除</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalLabel">
                            模态框（Modal）标题
                        </h4>
                    </div>
                    <div class="modal-body">
                        <input type="text" class="form-control" placeholder="请输入名称" v-model="add.name">
                        <input type="text" class="form-control" placeholder="请输入年龄" v-model="add.age">
                        <input type="text" class="form-control" placeholder="请输入电话" v-model="add.phone">
                        <input type="text" class="form-control" placeholder="请输入地址" v-model="add.address">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary add-btn" @click="addlist">提交更改</button>
                    </div>
                </div>
            </div>
        </div>
        <button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal" @click="addDat">添加</button>
    </div>


    <script src="./lib/jquery/jquery-3.2.1.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="./lib/vue/vue.min.js"></script>
    <script type="text/javascript">
        var crm = {
            data: {
                list: [],
                add: {},
                cut: false,
            },
            init: function () {
                this.onload();
                this.bindEvent();
            },
            onload: function () {
                $.ajax({
                    type: 'get',
                    url: 'http://localhost:7070/getlist',
                    dataType: "json",
                    data: {},
                    success: function (res) {
                        console.log(res.result.data)
                        crm.data.list = res.result.data;
                    }
                });
            },
            bindEvent: function () {
                $('#myModal').on('hide.bs.modal', function () {
                    crm.data.add = {};
                })
            }
        }
        var vm = new Vue({
            el: '#box',
            data: crm.data,
            methods: {
                del(id) {
                    $.ajax({
                        type: 'get',
                        url: 'http://localhost:7070/removelist',
                        dataType: "json",
                        data: {
                            id: id
                        },
                        success: function (res) {
                            crm.data.list = crm.data.list.filter(item => item.id != id);
                        }
                    });
                },
                addlist(e) {
                    console.log(crm.data.cut);
                    if (crm.data.cut == true) {
                        var newData = JSON.stringify(crm.data.add);
                        $.ajax({
                            url: 'http://localhost:7070/addlist',
                            type: 'post',
                            dataType: "json",
                            data: newData,
                            success: function (res) {
                                crm.data.list = res.result.data;
                                $('#myModal').modal('hide')
                            },
                            error: function (err) {
                                console.log(err)
                            }
                        });
                    } else {
                        var onedata = JSON.stringify(crm.data.add);
                        // console.log(onedata)
                        $.ajax({
                            type: 'post',
                            url:'http://localhost:7070/changelist',
                            dataType: 'json',
                            data: onedata,
                            success:function(res){
                                crm.data.list = res.result.data;
                                $('#myModal').modal('hide')
                            }
                        })
                    }
                },
                addDat() {
                    crm.data.cut = true;
                },
                one(id) {
                    crm.data.cut = false;
                    if (crm.data.cut == false) {
                        $.ajax({
                            type: 'get',
                            url: 'http://localhost:7070/onelist',
                            dataType: "json",
                            data: {
                                id:id
                            },
                            success: function (res) {
                                var [list] = res.result.data
                                crm.data.add = list;
                            }
                        })
                    }
                }
            },
            mounted: function () {
                crm.init();
            }
        })
    </script>
</body>

</html>